<template>
  <div id="consumerBox1">
    <div class="title">
      <span>美疗师管理</span>
    </div>
    <div>
      <el-input placeholder="请输入用户ID,昵称,手机号查询" prefix-icon="el-icon-search" v-model="input">
      </el-input>
      <el-button type="primary">主要按钮</el-button>
    </div>
    <div>
      <el-table :data="showTableData" border style="width: 100%" height="410">
        <el-table-column fixed prop="date" label="用户ID">
        </el-table-column>
        <el-table-column prop="name" label="昵称">
        </el-table-column>
        <el-table-column prop="province" label="登录手机号">
        </el-table-column>
        <!-- <el-table-column prop="city" label="认证状态">
        </el-table-column> -->
        <el-table-column  label="认证状态">
  <template slot-scope="scope">
    <span v-if="scope.row.type== 1">已实名</span>
    <span v-else>未实名</span>
  </template>
</el-table-column>
        <el-table-column prop="address" label="注册时间">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button> -->
            <el-button type="info" plain @click="handleClick(scope.row)">详情</el-button>
            <!-- <el-button type="text" size="small">禁用</el-button> -->
            <el-switch v-model="scope.row.type"
            :active-value="1" 
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949" 
            active-text="未实名"
            inactive-text="已实名"
            @change="switchChange(scope.row)">禁用</el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>
    <!-- 用户详情 -->
    <!-- <ConsumerDetails v-show="addVisible" :dataList="dataList"></ConsumerDetails> -->
  </div>
</template>

<script>
// import ConsumerDetails from './ConsumerDetails.vue';
export default {
  components:{
    // ConsumerDetails
  },
  name: 'BeautyTherapist',
  data() {
    return {
      dataList:{},
      // addVisible:false,
      input:'',
      currentPage4: 1,//放当前页
      pageSize: 5,//每页条数
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '已实名',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        type:1
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '未实名',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333,
        type:0
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '未实名',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333,
        type:0
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '已实名',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        type:1
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        type:0
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        type:1
      }],
    };
  },
  methods: {
    //分页函数
    handleClick(row) {
      this.$router.push({name:'ConsumerDetails',params:{row}})
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val
    },
    switchChange(num){
      console.log(num.type);
    },
  },
  mounted() { },
  computed: {
    showTableData() {
      let start = this.pageSize * (this.currentPage4 - 1)
      let end = start + this.pageSize
      let data = this.tableData.slice(start, end)
      return data
    },
  },
  watch: {},
};
</script>

<style scoped>
.title {
  width: 70px;
  height: 20px;
  padding-left: 10px;
  border-left: 4px solid #0082cc;
  font-size: 14px;
  margin-bottom: 20px;
}

.el-input {
  width: 400px;
  margin-bottom: 20px;
}

.el-button--primary {
  margin-left: 20px;
}

.el-main {
  position: relative;
}

.block {
  position: absolute;
  bottom: 50px;
  left: 45%;
  margin-left: -40px;
}

.el-button--info {
  width: 26%;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 12px;
  /* margin: 0 30px; */
  margin-right: 10px;
}

.el-button--warning {
  width: 26%;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 12px;
}

/* .el-button{
  width: 26%;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 12px;
} */
</style>
<style>
/* .el-input__inner {
  width: 350px;
} */
</style>
